<template>
  <div>
    <div class="box">
      <span class="lbt"></span>
      <div :class="['item',item.active?'active':'']" v-for="(item,ix) of listArr" :key="ix" @click="onSelect(ix)">
        <span :class="{lt:item.active}"></span>
        <img class="cursor" src="~@/assets/img/cursor.png">
        {{ item.title }}
        <span :class="{bt:item.active}"></span>
      </div>
      <el-select v-model="cycleId" placeholder="请选择" class="lunci" @change="selectLunci" v-if="lunci.length">
        <el-option
          v-for="item in lunci"
          :key="item.id"
          :label="item.title"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class='item-content'>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BarHeader from '@/components/bar-header';
import { getFirstLevelDirectory } from '@/api';

export default {
  components: { BarHeader },
  data() {
    return {
      cycleId: '',
      active: 0,
      listArr: [],
      selectDir: [],
    };
  },
  props: {
    termId: {
      type: String,
      default: () => '',
    },
    title: {
      type: String,
      default: () => '',
    },
    levelDir: {
      type: Boolean,
      default: () => false,
    },
    activeIndex: {
      type: Number,
      default: () => 0,
    },
    lunci: {
      type: Array,
      default: () => {
        return [];
      },
    },
    list: {
      type: Array,
      default: [],
    },
  },
  watch: {
    lunci: {
      handler(value) {
        if (this.lunci.length) {
          this.cycleId = this.lunci[0].id;
          this.emitChange();
        }
      },
    },
    activeIndex() {
      if (this.lunci.length) {
        this.cycleId = this.lunci[0].id;
        this.emitChange();
      }
    },
  },
  async created() {
    this.listArr = [...this.list];
    this.reset();
  },

  mounted() {
    if (this.lunci.length) {
      this.cycleId = this.lunci[0].id;
      this.emitChange();
      console.log('update:cycleId', this.cycleId);
    }
  },
  beforeDestroy() {
    this.$EventBus.$off('changeLunciLeftTop');
    this.$EventBus.$off('changeLunciLeftBottom');
    this.$EventBus.$off('changeLunciRightBottom');
  },
  methods: {
    emitChange(value) {
      this.$emit('update:cycleId', this.cycleId);
      /*      this.$EventBus.$emit('changeLunciLeftTop', value || this.cycleId);
            this.$EventBus.$emit('changeLunciLeftBottom', value || this.cycleId);
            this.$EventBus.$emit('changeLunciRightBottom', value || this.cycleId);*/
    },
    reset() {
      this.listArr.forEach(i => i.active = false);
      this.listArr[0].active = true;
    },
    onSelect(ix) {
      this.listArr.forEach(i => i.active = false);
      this.listArr[ix].active = true;
      this.$forceUpdate();
      this.$emit('update:activeIndex', ix);
    },
    selectLunci(value) {
      this.emitChange(value);
      this.$emit('update:cycleId', value);
    },
    onSelectDir(value) {
      this.$EventBus.$emit('changeDir', value);
    },
  },
};
</script>
<style lang='scss' scoped>
.lunci {
  float: right;
  margin-right: 10px;
  margin-top: 6px;
}

.box {
  position: relative;
  width: 600px;
  margin-left: 3px;
  height: 46px;
  background-image: linear-gradient(90deg,
    #102a7b 0%,
    rgba(16, 42, 122, 0.2) 100%);
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(270deg,
    rgba(7, 55, 137, 0.4) 0%,
    #0052d2 100%);
  border-image-slice: 1;

  .active {
    color: #fff !important;
  }

  .lbt {
    position: absolute;
    left: -4px;
    width: 4px;
    height: 46px;
    background-color: #1381fc;
    box-shadow: 1px 1px 6px 0px #1380fc;
  }

  .item {
    position: relative;
    width: 189px;
    cursor: pointer;
    height: 46px;
    display: inline-block;
    background-image: linear-gradient(90deg,
      #0a32af 0%,
      #102a7a 100%);
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(270deg,
      #073789 0%,
      rgba(6, 61, 152, 0.21) 21%,
      rgba(5, 67, 168, 0.41) 41%,
      rgba(2, 74, 189, 0.71) 71%,
      #0052d2 100%);
    border-image-slice: 1;
    font-family: SourceHanSansCN-Bold;
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    line-height: 46px;
    letter-spacing: 0px;
    color: #e2ebf1;

    .bt {
      position: absolute;
      bottom: 0;
      left: 8px;
      width: 168px;
      height: 3px;
      background-image: linear-gradient(90deg,
        #33b0ff 0%,
        rgba(39, 130, 255, 0.5) 100%);
    }

    .lt {
      position: absolute;
      left: 4px;
      top: 10px;
      width: 3px;
      height: 26px;
      background-color: #00fac8;
      box-shadow: 1px 1px 6px 0px #00fac8;
      border-radius: 2px;
    }
  }

  .cursor {
    width: 32px;
    height: 32px;
    margin-left: 4px;
    line-height: 46px;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 3px;
  }


}

$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);
.item-content {
  width: 605px;
  box-sizing: border-box;
  height: 432px;
  margin-top: 3px;
  padding: 16px;
  background-color: rgba(2, 20, 75, 0.65);
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(270deg,
    rgba(7, 55, 137, 0.4) 0%,
    #0052d2 100%);
  border-image-slice: 1;
}

.lr_titles {
  box-sizing: border-box;

  :deep(.border-box-content) {
    box-sizing: border-box;
    padding: 6px 16px 0px;
  }


  .item_title {
    height: $item-title-height;
    line-height: $item-title-height;
    width: 100%;
    color: #31abe3;
    text-align: center;
    // background: linear-gradient(to right, transparent, #0f0756, transparent);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .zuo,
    .you {
      width: 58px;
      height: 14px;
      background-image: url("../../assets/img/titles/zuo.png");
    }

    .you {
      transform: rotate(180deg);
    }

    .title-inner {
      font-weight: 900;
      letter-spacing: 2px;
      background: linear-gradient(
          92deg,
          #0072ff 0%,
          #00eaff 48.8525390625%,
          #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .item_title_content {
    height: $item_title_content-height;
  }

  .item_title_content_def {
    width: 100%;
    height: 100%;
  }


}
</style>
